<template>
  <div class="videoAdminList">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column label="标题" width="200">
            <template slot-scope="scope">
                <el-popover trigger="hover" placement="top">
                    <p>作者: {{ scope.row.author.college+' '+scope.row.author.name }}</p>
                    <p>类别: {{ scope.row.category.name }}</p>
                    <div slot="reference" class="name-wrapper imgTitle">
                        <el-tag size="medium">{{ scope.row.videoTitle }}</el-tag>
                    </div>
                </el-popover>
            </template>
        </el-table-column>
        <el-table-column label="封面" width="150">
            <template slot-scope="scope">
                <a href="javascript:void(0);" @click="updateImage(scope.row.id,scope.row.videoCoverPic)">
                    <el-image style="width: 100px; height: 120px;" 
                            :src="filePath+scope.row.videoCoverPic" 
                            fit="contain">
                    </el-image>
                </a>
            </template>
        </el-table-column>
        <el-table-column label="点击数" width="120">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.numberOfHits }}</span>
            </template>
        </el-table-column>
        <el-table-column label="上传日期" width="200">
            <template slot-scope="scope">
                <i class="el-icon-time"></i>
                <span style="margin-left: 10px">{{ scope.row.releaseTime }}</span>
            </template>
        </el-table-column>
        <el-table-column label="是否审核" width="140">
            <template slot-scope="scope">
                <span style="margin-left: 10px" class="audio" @click="audioWin(scope.$index,scope.row.isAudio)">
                    {{ scope.row.isAudio==0?"未审核":"已审核" }}
                </span>
            </template>
        </el-table-column>
        <el-table-column label="描述" width="180">
            <template slot-scope="scope">
                <el-button type="primary" size="mini" @click="showVideoDescribe(scope.row.videoDescribe)">点击查看详情</el-button>
            </template>
        </el-table-column>
        <el-table-column label="操作" width="180">
            <template slot-scope="scope">
                <el-button size="mini" @click="handleEdit(scope.$index)">编辑</el-button>
                <el-button size="mini" type="danger" @click="delWin(scope.$index)">删除</el-button>
            </template>
        </el-table-column>
        <el-table-column label="批量选择">
            <template slot-scope="scope">
                <el-checkbox v-model="checked[scope.$index]">{{checked[scope.$index]?'已选':'未选'}}</el-checkbox>
            </template>
        </el-table-column>
        <el-table-column label="播放">
            <template slot-scope="scope">
                <i class="el-icon-video-play" @click="playVideo(scope.row.id)"></i>
            </template>
        </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
        background
        layout="prev, pager, next"
        :page-size="size"
        :total="total"
        :current-page.sync="index"
        @current-change="change">
    </el-pagination>

    <el-button class="delAllBtn" type="danger" plain>一键删除</el-button>
    <el-button class="delMoreBtn" type="danger" plain @click="delMoreWin">批量删除</el-button>
    <el-button class="modifyAllBtn" type="success" plain>一键审核</el-button>
    <el-button class="modifyMoreBtn" type="success" plain @click="audioMoreWin">批量审核</el-button>
    <el-button class="queryAllBtn" type="primary" plain @click="queryAllBtn">全选</el-button>

    <!-- 信息修改 -->
    <el-dialog title="信息修改" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="视频标题" :label-width="formLabelWidth">
          <el-input v-model="form.videoTitle" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="视频类别" :label-width="formLabelWidth">
          <el-select v-model="form.videoCategory" placeholder="请选择图片类别">
            <el-option v-for="(category,index) in categorys" :key="index" :label="category.name" :value="category.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="制作人" :label-width="formLabelWidth">
          <el-select v-model="form.videoAuthor" placeholder="请选择图片制作人">
            <el-option v-for="(teacher,index) in teachers" :key="index" :label="teacher.college+' '+teacher.name" :value="teacher.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="点击量" :label-width="formLabelWidth">
          <el-input-number v-model="form.numberOfHits" label="描述文字"></el-input-number>
        </el-form-item>
        <el-form-item label="视频描述" :label-width="formLabelWidth">
          <el-input type="textarea" autocomplete="off" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容" v-model="form.videoDescribe"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleModify">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 封面修改 -->
    <el-dialog title="修改封面" :visible.sync="dialogImageVisible">
        <el-upload
            class="upload-demo"
            :action="uploadImageUrl+'?id='+this.now_id+'&videoCoverPic='+this.now_pic"
            :file-list="fileList"
            list-type="picture">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
    </el-dialog>

    <!-- 详情 -->
    <el-dialog
        title="图片描述"
        :visible.sync="dialogVideoDescribe"
        width="30%">
        <span>{{now_video_describe!="null"?now_video_describe:'暂无'}}</span>
    </el-dialog>

  </div>
</template>

<script>
import video_url from './url'
import file_path from './file_url'

export default {
    data() {
      return{
            dialogFormVisible: false,
            dialogImageVisible: false,
            dialogVideoDescribe: false,
            tableData:[],
            categorys: [],
            teachers:[],
            filePath: file_path[0],
            form: {
                id: 0,
                videoTitle: '',
                videoCategory: '',
                videoAuthor: '',
                numberOfHits: 0,
                videoDescribe: ''
            },
            formLabelWidth: '120px',
            fileList: [],
            now_id: null,
            now_pic: null,
            now_video_describe: '',
            uploadImageUrl: video_url[11].url,
            index: 1,
            size: 10,
            total: 0,
            checked_all: false,
            checked: [],
            ids: [],
            str: '',
            videoFilePath_str: '',
            videoCoverPic_str: '',
        }
    },
    methods: {
        // 视频播放
        playVideo(id){
            const { href } = this.$router.resolve({
                path:"/playVideo",
                query:{
                    id: id,
                }
			});
			window.open(href, '_blank');
        },
        // 视频描述
        showVideoDescribe(videoDescribe){
            this.now_video_describe = videoDescribe;
            this.dialogVideoDescribe = true;
        },
        // 获取 被选中 的id集合
        getCheckedBoxs(temp){
            this.ids = [];
            this.str = '';
            this.videoFilePath_str = '';
            this.videoCoverPic_str = '';
            let index = 0;
            console.log("getCheckBoxs = "+this.checked)
            for(let i=0;i<this.tableData.length;i++){
                if(this.checked[i] == true){
                    if(temp==1&&this.tableData[i].isAudio==0) {
                        if(index != 0) {
                            this.str += ",";
                            this.videoFilePath_str += ",";
                            this.videoCoverPic_str += ",";
                        }
                        this.str += this.tableData[i].id;
                        this.videoFilePath_str += this.tableData[i].videoFilePath;
                        this.videoCoverPic_str += this.tableData[i].videoCoverPic;
                        this.ids[index] = this.tableData[i].id;
                        index++;
                    }else if(temp==2) {
                        if(index != 0) {
                            this.str += ",";
                            this.videoFilePath_str += ",";
                            this.videoCoverPic_str += ",";
                        }
                        this.str += this.tableData[i].id;
                        this.videoFilePath_str += this.tableData[i].videoFilePath;
                        this.videoCoverPic_str += this.tableData[i].videoCoverPic;
                        this.ids[index] = this.tableData[i].id;
                        index++;
                    }
                }
            }
        },
        // 批量删除
        moreDelete(){
            this.getCheckedBoxs(2);
            let len = this.ids.length;
            this.$axios({
                url: video_url[13].url,
                params: {
                    ids: this.str,
                    videoFilePaths: this.videoFilePath_str,
                    videoCoverPics: this.videoCoverPic_str
                }
            }).then(res => {
                // 成功
                // 删除最后一页的最后一项，避免出现空页
                if((this.total-len)%this.size > 0) {
                    if((((this.total-len)/this.size)+1<this.index)&&this.index>=1){
                        this.index--;
                    }
                }else{
                    if(((this.total-len)/this.size<this.index)&&this.index>1){
                        this.index--;
                    }
                }
                this.queryAllVideos();
                this.queryAllVideos();
                this.success("批量删除成功");
                this.checkedValue(false);
            }).catch(() => {
                this.error("批量删除失败!");
            })
            this.ids = [];
        },
        // 批量删除提示窗口
        delMoreWin(){
            this.$confirm('此操作将永久删除该文件, 请确定是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                center: true
                }).then(() => {
                    this.moreDelete();
                }).catch(() => {
                    this.info("已取消批量删除")
            });
        },
        // 批量审核
        moreAudio(){
            this.getCheckedBoxs(1);
            if(this.ids.length>0){
                this.$axios({
                    url: video_url[14].url,
                    params: {
                        ids: this.str
                    }
                }).then(res => {
                    // 成功
                    this.queryAllVideos();
                    this.success("批量审核通过");
                    this.checkedValue(false);
                }).catch(() => {
                    this.error("审核失败了T_T!");
                })
            }else{
                this.info("不需要再次审核");
            }
        },
        // 批量审核提示窗口
        audioMoreWin(){
            this.$confirm('是否批量审核, 请确定是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                center: true
                }).then(() => {
                    this.moreAudio();
                }).catch(err => {
                    this.info("已取消批量审核");
            });
        },
        // 翻页
        change(index){
            this.checkedValue(false);
            this.index = index;
            this.queryAllVideos();
        },
        // 全不选
        checkedValue(flag){
            // alert("checkValue");
            this.checked = new Array(this.tableData.length);
            // alert(this.tableData.length);
            for (let i = 0; i < this.checked.length; i++) {
                this.checked[i] = flag;
            }
            console.log("checkedValue = "+this.checked);
        },
        // 全选/全不选
        queryAllBtn(){
            // alert("queryAllBtn");
            let count = 0;
            console.log(this.checked);
            for(let i=0;i<this.tableData.length;i++){
                if(this.checked[i]) count++;
            }
            console.log(count);
            if(count != this.checked.length){
                this.checkedValue(true);
            }else{
                this.checkedValue(false);
            }
        },
        // 审核
        handleAudio(index){
            this.$axios({
                url: video_url[14].url,
                params: {
                    ids: this.tableData[index].id
                }
            }).then(res => {
                // 成功
                this.queryAllVideos();
                this.success("审核通过");
            }).catch(() => {
                this.error("出现错误了T_T!");
            })
        },
        // 审核弹框
        audioWin(index,isAudio){
            if(isAudio == 0){
                this.$confirm('是否确定该图片通过审核?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.handleAudio(index);
                }).catch(() => {
                    this.info("已取消");         
                });
            }else{
                this.success("该图片审核已通过");
            }
            
        },
        // 修改 - 获取值
        handleEdit(index) {
            this.dialogFormVisible = true;
            // 按照ID查询
            this.$axios({
                url: video_url[6].url+"?id="+this.tableData[index].id,
            }).then(res => {
                this.form = res.data;
                console.log(this.form);
            })
        },
        // 修改图片
        updateImage(id,pic){
            this.fileList = [];
            this.now_id = id;
            this.now_pic = pic
            this.dialogImageVisible = true;
        },
        // 查询全部视频
        queryAllVideos(){
            this.$axios({
                url: video_url[5].url,
                params:{
                    index: this.index,
                }
            }).then(res => {
                this.tableData = res.data;
                // 初始化checked数组
                this.checkedValue(false);
                // console.log(this.tableData);
            })
        },
        // 查询老师的信息
        getTeachers(){
            this.$axios({
                url: video_url[8].url
            }).then(res => {
                this.teachers = res.data;
            })
        },
        // 添加
        handleModify(){
            this.dialogFormVisible = false;
            console.log(this.form);
            let video = new URLSearchParams();
            video.append("id",this.form.id)
            video.append("videoTitle", this.form.videoTitle);
            video.append("videoCategory", this.form.videoCategory);
            video.append("videoAuthor", this.form.videoAuthor);
            video.append("numberOfHits",this.form.numberOfHits);
            video.append("videoDescribe",this.form.videoDescribe);

            this.$axios({
                url: video_url[12].url,
                params: video
            }).then(res => {
                // 修改成功
                if(res.data > 0){
                    // 查询全部数据
                    this.queryAllVideos();
                }
            })
        },
        // 删除
        handleDelete(index) {
            this.$axios({
                url: video_url[13].url,
                params: {
                    ids: this.tableData[index].id,
                    videoFilePaths: this.tableData[index].videoFilePath,
                    videoCoverPics: this.tableData[index].videoCoverPic
                }
            }).then(res => {
                console.log(res);
                // 成功
                // 删除最后一页的最后一项，避免出现空页
                if((this.total-1)%this.size > 0) {
                    if((((this.total-1)/this.size)+1<this.index)&&this.index>=1){
                        this.index--;
                    }
                }else{
                    if(((this.total-1)/this.size<this.index)&&this.index>1){
                        this.index--;
                    }
                }
                this.queryVideoCount();
                this.queryAllVideos();
                this.success("删除成功");
            }).catch((err) => {
                console.log(err);
                this.error("删除失败!");
            })
        },
        // 弹出 删除询问窗口 确定 调用删除方法
        delWin(index){
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                center: true
            }).then(() => {
                this.handleDelete(index);
            }).catch(() => {
            this.info("已取消删除");
            });
        },
        queryVideoCount(){
            this.$axios({
                url: video_url[9].url,
            }).then(res => {
                this.total = res.data;
            })
        },
        success(msg){
            this.$message({
                showClose: true,
                message: msg,
                type: 'success'
            });
        },
        error(msg){
            this.$message({
                showClose: true,
                message: msg,
                type: 'error'
            });
        },
        info(msg){
            this.$message({
                showClose: true,
                message: msg,
                type: 'info'
            });
        },
    },
    created(){
        // 初始化total
        this.queryVideoCount();
        // 初始数据
        this.queryAllVideos();
        // 类别选项
        this.$axios({
            url: video_url[7].url,
        }).then(res => {
            this.categorys = res.data;
        })
        // 制作人选项
        this.getTeachers();
    },
    watch:{
        dialogImageVisible(newVal,oldVal){
            if(newVal == false){
                this.queryAllVideos();
            }
        }
    }
}
</script>

<style>
input[type=file]{
    display: none !important;
}
.audio:hover{
    color:firebrick;
    cursor: pointer;
}
.queryAllBtn,.modifyMoreBtn,.modifyAllBtn,.delMoreBtn,.delAllBtn{
    float: right;
    margin-top: -30px;
    margin-right: 10px;
}
.el-tag--light{
    max-width: 180px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.el-icon-video-play{
    cursor: pointer;
}
.el-icon-video-play:hover{
    color: #409EFF;
}
</style>